<!--邀请好友-普通用户-->
<template>
  <scroller class="all bg1">
    <div class="wrapper" v-if="data">

      <div class="height30"></div>
      <text class="font60 text2 tCenter">{{T('邀好友立享多重奖励')}}</text>
      <div class="height60"></div>
      <text class="font26 text2 tCenter">{{T('每成功邀请一名好友注册')}}</text>
      <div class="height10"></div>
      <text class="font26 text2 tCenter">{{T('可获得 ${1} VTN，好友邀请可再获得 ${2} VTN').replace("${1}",data.directInviterChrReward).replace("${2}",data.indirectInviterChrReward)}}</text>

      <div class="code">
        <div class="border-l bg1"></div>
        <div class="border-r bg1"></div>
        <div class="line-c"></div>
        <div class="circle" style="left:63px;top:170px;width:35px;height:35px;border-radius:35px;"></div>
        <div class="circle" style="left:528px;top:132px;width:48px;height:48px;border-radius:48px;"></div>
        <div class="circle" style="left:418px;top:82px;width:26px;height:26px;border-radius:26px;"></div>
        <div class="circle" style="left:34px;top:76px;width:16px;height:16px;border-radius:16px;"></div>
        <div class="circle" style="left:459px;top:31px;width:16px;height:16px;border-radius:16px;"></div>
        <div class="star" style="top:72px; left:152px; background-color:rgba(242,219,83,1);">
          <div class="star-1"></div>
          <div class="star-2"></div>
          <div class="star-3"></div>
          <div class="star-4"></div>
        </div>
        <div class="star" style="top:27px; left:534px; background-color:rgba(242,219,83,1);">
          <div class="star-1"></div>
          <div class="star-2"></div>
          <div class="star-3"></div>
          <div class="star-4"></div>
        </div>
        <div class="star" style="top:18px; left:63px; background-color:#22ABFD;">
          <div class="star-1"></div>
          <div class="star-2"></div>
          <div class="star-3"></div>
          <div class="star-4"></div>
        </div>
        <div class="star" style="top:111px; right:18px; background-color:#22ABFD;">
          <div class="star-1"></div>
          <div class="star-2"></div>
          <div class="star-3"></div>
          <div class="star-4"></div>
        </div>

        <div class="height60"></div>
        <text class="font26 text4">{{T('您的专属邀请码')}}</text>

        <div class="code-bar">
          <text class="font50 text1">{{data.inviteCode}}</text>
        </div>
        <div class="code-bar-white1"></div>
        <div class="code-bar-white2"></div>
        <div class="code-bar-white3"></div>
        <div class="code-bar-white4"></div>

        <div class="copy main-b1" @click="copyClick(data.inviteCode)">
          <text class="font26 main-t1">{{T('复制')}}</text>
        </div>
          <div class="invite main-b1" @click="inviteClick" >
            <text class="font26 main-t1">{{T('面对面邀请')}}</text>
          </div>
        
      </div>
      
      <div class="share main-bt1" @click="shareClick">
        <text class="font30 text1">{{T('发送邀请')}}</text>
      </div>
      <div class="height60"></div>
      <text class="font26 text2 tCenter">{{T('我的邀请')}}</text>
      <div class="info bg3">
        <div class="row jaround">
          <div class="acenter">
            <text class="font36 text2">{{data.inviteUserNum}}</text>
            <text class="font22 text3">{{T('成功邀请(人)')}}</text>
          </div>
          <div class="acenter">
            <text class="font36 text2">{{data.inviteNum}}</text>
            <text class="font22 text3">{{T('奖励VTN')}}</text>
          </div>
        </div>

        <div class="height30"></div>
        <div class="row">
          <text class="font22 text2 all">{{T('累计邀请实盘用户数')}}</text>
          <text class="font22 text2">{{data.offNumber}}</text>
        </div>
        
        <div class="row jcenter">
          <div class="op main-bt1" @click="opClick">
            <text class="font30 text1">{{T('开通合伙人')}}</text>
          </div>
        </div>
      </div>
      <div class="acenter">
        <div class="height10"></div>
        <text class="font22 text2">{{T('希望获得额外的邀请奖励吗？')}}</text>
        <text class="font22 main-t1" @click="guizheClick">{{T('了解合伙人规则>>')}}</text>
      </div>

      <div class="height60"></div>
      <text class="font26 text2 tCenter">{{T('邀请记录')}}</text>
      <div class="record-header bg3">
        <text class="font22 text3 all5">{{T('好友账号')}}</text>
        <text class="font22 text3 all5">{{T('邀请时间')}}</text>
        <text class="font22 text3 all3">{{T('奖励VTN')}}</text>
      </div>

      <div class="record bg3" v-for="(item,index) in data.inviteList" v-bind:key="index">
        <text class="font26 text2 all5">{{item.nickName}}</text>
        <text class="font26 text2 all5">{{item.time}}</text>
        <text class="font26 text2 all3">{{item.num}}</text>
      </div>

      <div class="height60"></div>
      <text class="font22 no-t1">{{T('Vtrading拥有活动的一切解释权，虚假邀请行为会被取消奖励')}}</text>
    </div>
  </scroller>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.wrapper{
  padding: 60px;
}

/******************* 详情*/
.info {
  margin-top:20px;
  border-radius: 12px;
  padding: 30px;
  margin-left: -20px;
  margin-right: -20px;
}
.op {
  justify-content: center;
  align-items: center;
  height:60px;
  border-radius:30px;

  padding-left: 40px;
  padding-right: 40px;
  margin-top: 70px;
  margin-bottom: 10px;
}

.invite-guizhe{
  flex-direction: row;
  align-items: center;
  width:690px;
  height:47px;
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #121D39;
}
.invite-guizhe-text1{
  height: 40px;
  line-height: 40px;
  font-size:22px;
  font-family:PingFang SC;
  font-weight:400;
  color:rgba(255,255,255,1);
}
.invite-guizhe-text2{
  height: 40px;
  line-height: 40px;
  font-size:22px;
  font-family:PingFang SC;
  font-weight:400;
  color:rgba(10,154,240,1);
}

/******************* 邀请码*/
.code {
  align-items: center;
  height:460px;
  margin-top:60px;
  background-color:#ffffff;
  border-radius:12px;
}
.copy {
  justify-content: center;
  align-items: center;
  min-width:140px;
  height:52px;
  border-width:1px;
  border-radius:4px;

  padding-left: 20px;
  padding-right: 20px;

  margin-top: 160px;
}
.invite {
  justify-content: center;
  align-items: center;
  background-color:rgba(204,216,238,1);
  height:70px;
  border-width:1px;
  border-radius:4px;

  padding-left: 20px;
  padding-right: 20px;

  margin-top: 20px;
}
.share {
  justify-content: center;
  align-items: center;
  height:70px;
  border-radius:12px;

  margin-top:60px;
}
/*图案*/
.border-l{
  position: absolute;
  width:40px;
  height:40px;
  border-radius:20px;
  top:210px;
  left:-20px;
}
.border-r{
  position: absolute;
  width:40px;
  height:40px;
  border-radius:20px;
  top:210px;
  right:-20px;
}
.line-c{
  width:590px;
  height:1px;

  position: absolute;
  top:230px;
  left:20px;
  z-index: 1;

  border-top-color: #909AB4;
  border-top-width: 1px;
  border-top-style: dashed;
}
.circle{
  position:absolute;
  background-color:rgba(34,171,253,1);
  opacity:0.13;
}
.star{
  width:29px;
  height:29px;

  position: absolute;
  z-index: 3;
  
  overflow: hidden;
}
.star-1{
  width:29px;
  height:29px;
  position: absolute;
  top:-13px;
  left:-15px;
  z-index: 1;
  background-color:#ffffff;
  border-radius:29px;
}
.star-2{
  width:40px;
  height:40px;
  position: absolute;
  top:-22px;
  right:-24px;
  z-index: 1;
  background-color:#ffffff;
  border-radius:29px;
}
.star-3{
  width:40px;
  height:40px;
  position: absolute;
  bottom:-22px;
  left:-24px;
  z-index: 1;
  background-color:#ffffff;
  border-radius:30px;
}
.star-4{
  width:29px;
  height:29px;
  position: absolute;
  bottom:-13px;
  right:-15px;
  z-index: 1;
  background-color:#ffffff;
  border-radius:29px;
}
.code-bar{
  justify-content: center;
  align-items: center;
  width:348px;
  height:84px;

  position: absolute;
  top:124px;
  left:141px;
  z-index: 3;

  background-image:linear-gradient(to bottom right,rgba(83,196,254,1),rgba(113,59,224,1));
  border:1px solid rgba(34,171,253,1);
}
.code-bar-text{
  width:348px;
  height:84px;

  line-height: 80px;
  text-align: center;

  position: absolute;
  top:124px;
  left:141px;
  z-index: 5;

  font-size:50px;
  font-family:Helvetica;
  font-weight:400;
  color:rgba(255,255,255,1);
}
.code-bar-white1{
  width:20px;
  height:84px;
  position: absolute;
  top:124px;
  left:151px;
  z-index: 4;
  background-color: #ffffff;
}
.code-bar-white2{
  width:10px;
  height:84px;
  position: absolute;
  top:124px;
  left:190px;
  z-index: 4;
  background-color: #ffffff;
}
.code-bar-white3{
  width:20px;
  height:84px;
  position: absolute;
  top:124px;
  right:151px;
  z-index: 4;
  background-color: #ffffff;
}
.code-bar-white4{
  width:10px;
  height:84px;
  position: absolute;
  top:124px;
  right:190px;
  z-index: 4;
  background-color: #ffffff;
}
/******************* 记录*/
.record-header{
  flex-direction: row;
  align-items: center;
  height:60px;
  border-radius:12px;
  padding-left: 30px;
  padding-right: 30px;

  margin-left: -20px;
  margin-right: -20px;
  margin-top:20px;
  margin-bottom:8px;
}
.record {
  flex-direction: row;
  align-items: center;
  height:104px;
  border-radius:12px;

  padding:0 30px;
  margin-bottom:4px;
  margin-left: -20px;
  margin-right: -20px;
}

</style>

<script>

import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jhttps from "@/_js/https";
import jtime from "@/_js/time";

const weexFunction = weex.requireModule("WeexFunction");
const clipboard = weex.requireModule("clipboard");
const weexModal = weex.requireModule("WeexModal");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("邀请好友"));

export default {
  
  data() {
    return {
      T:T,
      data:undefined,
    };
  },

  created(){
    this.httpHome();
  },

  methods: {

    initData(data) {
      for (let index = 0; index < data.inviteList.length; index++) {
        var item = data.inviteList[index];
        item.time = jtime.getTime(item.registerTime, 'y/M/d');
        item.num = item.firInviteNum + (item.secInviteNum>0 ? ('+'+item.secInviteNum) : '');
      }

      return data;
    },

    /****************************** https*/
    //邀请页首页
    httpHome(){

      jmodal.showLoad();
      var param = {};
      jhttps.postX("systemV2/queryInviteDetail",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          this.data = this.initData(data.data);
        }else{
          jmodal.toast(data.msg);
        }
      });
    },
    
    /****************************** 按钮*/
    //复制邀请码
    copyClick(inviteCode) {
      jmodal.toast({'message':T('复制成功'),duration:2});
      clipboard.setString(inviteCode);
    },

    //面对面邀请
    inviteClick() {
      var param = {'inviteCode':this.data.inviteCode};
      jnavigator.openDialog("invite/DialogInvite",param);
    },

    //分享点击
    shareClick() {
      var param = {'inviteCode':this.data.inviteCode};
      jnavigator.openDialog('share/ShareInviteHome', param);
    },
    
    //开通合伙人
    opClick(){
      
      jmodal.showLoad(); 
      var param = {};
      jhttps.postX("partner/openPartner",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          jmodal.toast(T('开通成功'));
          setTimeout(() => {
            jnavigator.load('', "invite/PartnerHome");
          }, 700);
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    //开通合伙人规则
    guizheClick(){
      jnavigator.open("", "invite/PartnerRule");
    },
  }
};


</script>
